import React, { Component } from "react";
import screenfull from "screenfull";
import { message, Tooltip } from "antd";
import  * as Icon from '@ant-design/icons';
import "./index.less";
class FullScreen extends Component {
  state = {
    isFullscreen: false,
  };
  init = () => {
    if (screenfull.isEnabled) {
      screenfull.on("change", this.change);
    }
  };
  change = () => {
    this.setState({
      isFullscreen: screenfull.isFullscreen,
    });
  };
  click = () => {
    if (!screenfull.isEnabled) {
      message.warning("you browser can not work");
      return false;
    }
    screenfull.toggle();
  };
  componentDidMount() {
    this.init();
  }
  componentWillUnmount() {
    if (screenfull.isEnabled) {
      screenfull.off("change", this.change);
    }
  }
  render() {
    return (
      <div className="fullScreen-container">
        <Tooltip placement="bottom" title={this.state.isFullscreen ? "取消全屏" : "全屏"}>
          {React.createElement(this.state.isFullscreen ? Icon['FullscreenExitOutlined'] : Icon['FullscreenOutlined'], {
            onClick: this.click,
          })}
        </Tooltip>
      </div>
    );
  }
}

export default FullScreen;
